{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <link rel="icon" href="{% static 'login/image/2.png' %}">

    <title>登录</title>

    <!-- Bootstrap core CSS -->  
    <!-- Bootstrap 核心CSS文件 -->
    <link href="{% static 'login/css/bootstrap.min.css' %}" rel="stylesheet">
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="signin.css" rel="stylesheet">
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <style type="text/css">
    body{
        background: url("{% static 'login/image/1.jpg' %}");
        background-size: cover;
        background-attachment: fixed;
        }

        .fa{display: inline-block;
            top: 27px;
            left: 6px;
            position: relative;
            color: #ccc;}
        input[type="text"],input[type="password"]{padding-left:26px;}

        #checkbox{padding-left:21px;}
        
        .form-signin-heading{
            text-align: center;
            color: #337ab7;
        }
        h3{
            display: inline-block;    
            margin:120px auto 0;
        }
        .tabbable{
            background: rgba(255,255,255,0.6);
        }
    </style>
  </head>

  <body>
   <div class="container">
    <div class="row">
     <div class="col-md-4"></div>
      <div class="col-md-4 login_box">
        <h2 class="form-signin-heading">北京网络职业学院考试系统</h2>        
        <h3 class="form-signin-heading">请选择</h3>
        <div class="tabbable" id="tabs-142713">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#panel-71949" data-toggle="tab" contenteditable="false" class="glyphicon glyphicon-education">学生登录</a>
                </li>
                <li class="">
                    <a href="#panel-486460" data-toggle="tab" contenteditable="false" class="glyphicon glyphicon-user">老师登录</a>
                </li>
                <li class="">
                    <a href="#panel-666" data-toggle="tab" contenteditable="false" class="glyphicon glyphicon-check">教务登录</a>
                </li>
            </ul>
            <div class="tab-content">
                <!-- 学生登录界面 -->
                <div class="tab-pane active" id="panel-71949">
                    <form class="form-signin" action="{%url 'login:login_yunsuan'%}" method="post">
                        {% csrf_token %}
                    <i class="fa fa-user fa-lg"></i>
                    <label for="inputName" class="sr-only">账号：</label>
                    <input type="text" name="username" id="inputName" class="form-control" placeholder="学生姓名" required autofocus>
                    <i class="fa fa-lock fa-lg"></i>
                    <label for="inputPassword" class="sr-only">密码：</label>
                    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" value="remember-me"> 记住我
                        </label>
                        <a href="{%url 'login:change_pswd'%}">修改密码</a>
                        {% if message %}
                        <h5 style="color: red;">{{message}}</h5>
                        {% endif %}
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
                </form>
                </div>
                <!-- 老师登录界面 -->
                <div class="tab-pane" id="panel-486460">
                    <form class="form-signin" action="{%url 'login:login_yunsuan'%}" method="post">
                        {% csrf_token %}
                    <i class="fa fa-user fa-lg"></i>
                    <label for="inputName" class="sr-only">账号：</label>
                    <input type="text" name="username" id="inputName" class="form-control" placeholder="老师工号" required autofocus>
                    <i class="fa fa-lock fa-lg"></i>
                    <label for="inputPassword" class="sr-only">密码：</label>
                    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" value="remember-me"> 记住我
                        </label>
                        <a href="{%url 'login:change_pswd'%}">修改密码</a>
                        {% if message %}
                        <h5 style="color: red;">{{message}}</h5>
                        {% endif %}
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
                </form>
                </div>
                <!-- 教务登录 -->
                <div class="tab-pane" id="panel-666">
                    <form class="form-signin" action="{%url 'login:login_yunsuan'%}" method="post">
                        {% csrf_token %}
                    <i class="fa fa-user fa-lg"></i>
                    <label for="inputName" class="sr-only">账号：</label>
                    <input type="text" name="username" id="inputName" class="form-control" placeholder="教务工号" required autofocus>
                    <i class="fa fa-lock fa-lg"></i>
                    <label for="inputPassword" class="sr-only">密码：</label>
                    <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
                    <div class="checkbox">
                        <label>
                        <input type="checkbox" value="remember-me"> 记住我
                        </label>
                        <a href="{%url 'login:change_pswd'%}">修改密码</a>
                        {% if message %}
                        <h5 style="color: red;">{{message}}</h5>
                        {% endif %}
                    </div>
                    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
                </form>
                </div>
            </div>
        </div>  
      </div>
     <div class="col-md-4"></div>
    </div>
   </div> <!-- /container -->

    <!-- 引用的样式部分，不属于内容： -->
    <!-- jquery部分： -->
    <script type="text/javascript" src="{% static 'login/js/jquery-3.3.1.min.js' %}"></script>
    <!-- Bootstrap部分： -->
    <script type="text/javascript" src="{% static 'login/js/bootstrap.min.js' %}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>